<template>
<div class="app-container documentation-container">

<div  style="margin-bottom: 70px;">
  
<p>
    <span style=""><strong>上传一张新作品（高清）</strong></span>
</p>

<div class="luru">
<div>
  <div>
    <van-uploader :after-read="dealwithimages720" v-model="fileList" multiple :max-count="1" preview-size="300px" />
  </div>

<div style="font-size:14px;">
   <p>
    <span style="">色彩模式：CMYK或RGB</span>
   </p>
    <p>
    <span style="">图片格式要求：JPG或TIF</span>
   </p>
   <p>
    <span style="">图片分辨率：100dpi以上</span>
   </p>
   <p>
    <!-- <span style="">图片命名：图片名需标注为艺术作品名称</span>
   </p>
   <p>
    <span style="">作品故事：如有作品故事也可以以word/txt形式提交</span>-->
   </p> 
</div>

</div>




   <div>  
    <div>
       <van-cell-group>
        <van-field v-model="item.title" placeholder="请输入作品名称" label="名称" required/>
       <van-field
           v-model="item.longDesc"
          label="作品故事"
          type="textarea"
          rows="5"
          placeholder="请输入故事描述" 
          autosize
          border
       />
       <van-field
      readonly
      clickable
      label="作品分类"
      :value="value"
      placeholder="选择作品分类"
      @click="showPicker = true"
      required
       />
       </van-cell-group>
   </div>



<div style="margin-top:20px;width:100%;height:auto">
<label style="font-size:14px;margin-left:15px;color:#6f6f70;float:left;margin-top:3px">作品标签（可多选）</label>
<div class="tagdiv">
 <van-tag round 
 v-for="(itema,index) in list" :key="index"  style="margin-left:10px;margin-bottom:10px" @click="onchangeit(itema,itema.color,$event)" :color="itema.color" >{{itema.name}}</van-tag>
</div>
</div>


<div> 
<label style="font-size:14px;margin-left:15px;color:#6f6f70;float:left;margin-top:3px">作品可呈现的商品类型:当前为全部类型</label>
<div class="tagdiv"  >
 <van-tag round 
 v-for="(item,index) in list2" :key="index"  style="margin-left:10px;margin-bottom:10px" @click="onchangeit(item,item.color,$event)" :color="item.color" >{{item.specName}}</van-tag>
</div>
</div>

</div>

</div>

</div>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
<div class="tijiaozuopin" @click="additem">确认上传本幅作品</div>

</div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'
import { mapGetters } from 'vuex'
import {Circle, Popup,Field,Cell, CellGroup,Picker,Tag  } from 'vant'

import Vue from 'vue'
// import { Image } from 'vant'; .use(Image)
Vue.use(Field).use(Cell).use(CellGroup).use(Picker).use(Tag);

import { Uploader } from 'vant'
Vue.use(Uploader);
import digitaSign from '@/components/page/case/digitaSign';
 Vue.use(Circle);
Vue.use(Popup)
import { gettokens,additem,gettags,getskunames} from "@/api/user";


export default {
  name: 'Documentation',
  components: { DropdownMenu },
    computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'cardname',
      'introduction'
    ])
  },
  data() {
    return {
      list2:[],
      tiff:null,
      piccount:0,
      workname:'',
      file720:null,
      file240:null,
      fileori:null,
      fileoripng:null,
      tempvideo:{},
        colorvalue:0,
        indexid:null,
         value: '艺术',
      showPicker: false,
      columns: ['艺术'],
        pictitle:null,
        picdesc:null,
        picname:null,
        item:{appid:1,roomid:123,locked:1,xinlingshou:0,cid:23,price:49,orignalPrice:49,num:100,numRecord:100,limitNum:100,limitStandard:1,peerNum:100,buyFee:0,sellFee:0,upRate:0.3,downRate:0.3,peerDayEntrustMax:0,peerMemberSellNum:0,peerMemberBuyNum:0,peerWeekOverNum:0},
        picurl:null,
      havesign:false,
      popcontent:null,
      sign:false,
      show2:false,
      show:false,
       currentRate:0,
            rate:100,
            rate2:2,
            text:'',
        uploadImage5: require('@/assets/images/case/signname.png'),
          fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
list: [],
classlist: [
        { name: '手机壳', indexid: 0 ,color:"#969799"},
        { name: '画框', indexid: 1 ,color:"#969799"},
        { name: 'T恤', indexid: 3 ,color:"#969799"}
       
      ],
      articleList: [
        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
      ]
    }
  },
  components:{
digitaSign

  },
  mounted(){
     this.inituploader();
     this.gettags();
     this.getskunames();
      // if(sessionStorage.getItem('signpic')&&sessionStorage.getItem('signpic')!='null')
      // {
      //   this.uploadImage5=sessionStorage.getItem('signpic')
      //   this.sign=true;
      // }

  },
  methods:{
         // 从base64转化为file文件
    base64ToFile(base64Str, fileName) {
      const params = base64Str.split(',')
      const mime = params[0].match(/:(.*?)/)[1]
      const fileData = atob(params[1]) // 解码Base64
      let { length } = fileData
      const uint8Array = new Uint8Array(length)
      while (length) {
        length -= 1
        uint8Array[length] = fileData.charCodeAt(length)
      }
      return new File([uint8Array], fileName, { type: mime })
    },
    gettags(){
 gettags({}).then(res => {
                   
                    // this.list=res;
                    for(var i=0;i<res.length;i++)
                    {
                       if(res[i].name!='推荐艺术')
                       {
                      res[i].color='#969799';
                      res[i].select=0;
                      this.list.push(res[i]);
                       }

                    }
                    // this.list.forEach(element => {
                    //   element.color="#969799"
                    // });
                    //console.log(this.list)
                  
    

        
          },
          err=>{
             console.log('error')
               this.$loadingclose();
          }
          );
      
    },
    getskunames(){
 getskunames({}).then(res => {
                   
                    // this.list=res;
                    for(var i=0;i<res.result.length;i++)
                    {
                      res.result[i].color='#969799';
                      res.result[i].select=0;
                      this.list2.push(res.result[i]);
                      console.log(this.list2)
                       

                    }
                    // this.list.forEach(element => {
                    //   element.color="#969799"
                    // });
                    //console.log(this.list)
                  
    

        
          },
          err=>{
             console.log('error')
               this.$loadingclose();
          }
          );
      
    },
      resize(file,width,height,reply,index){
          console.log('start3')
 
var reader = new FileReader();
 

var imgs = new Image();
 

// 选择的文件对象
 reader.readAsDataURL(file);    
// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
  console.log('read ok')
    imgs.src = e.target.result;
};
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
 
// base64地址图片加载完毕后
var that=this;
imgs.onload = function () {
  console.log('img:')
    // 图片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
    // 最大尺寸限制
    var maxWidth = width, maxHeight = height;
    // 目标尺寸
    var targetWidth = originWidth, targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas对图片进行缩放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 图片压缩
    context.drawImage(imgs, 0, 0, targetWidth, targetHeight);
    var result=canvas.toDataURL();
    var resizeimagecut=that.base64ToFile(result, 'resize.png')
 
   var  userData =
         '{"Vod":{"StorageLocation":"","Title":"'+that.workname+'","Description":"this is desc.我是描述","CateId":"19","index":"'+index+'", "Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';

   console.log('img1.5:')


        that.uploader.addFile(
          resizeimagecut,
          null,
          null,
          null,
          userData
        );
      
  console.log('img2:')
      reply(resizeimagecut);

}




        },





 resizetif(file,width,height,reply,index){
          console.log('start3')
 
var reader = new FileReader();
 
var Tiff = require('tiff.js');

var imgs = new Image();
 

// 选择的文件对象
 reader.readAsArrayBuffer(file);    
// 文件base64化，以便获知图片原始尺寸
var that=this;
reader.onload = function(e) {
  console.log('read ok')
    // imgs.src = e.target.result;
            var buffer = e.target.result;
        var tiff = new Tiff({buffer: buffer});
        var canvasa = tiff.toCanvas();

// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

  console.log('img:')
    // 图片原始尺寸
    var originWidth = tiff.width();
    var originHeight = tiff.height();
    // 最大尺寸限制
    var maxWidth = width, maxHeight = height;
    // 目标尺寸
    var targetWidth = originWidth, targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas对图片进行缩放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 图片压缩
    console.log('image:'+targetWidth+"/"+targetHeight)
        console.log(canvasa)

    context.drawImage(canvasa, 0, 0, targetWidth, targetHeight);
    var result=canvas.toDataURL();
    console.log(result)
    var resizeimagecut=that.base64ToFile(result, 'resize.png')
    if(!that.fileoripng)
     {
       var fileoripngdata=canvasa.toDataURL();
        that.fileoripng=that.base64ToFile(fileoripngdata, 'resize.png');

     }

   var  userData =
         '{"Vod":{"StorageLocation":"","Title":"'+that.workname+'","Description":"this is desc.我是描述","CateId":"19","index":"'+index+'", "Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';

   console.log('img1.5:')


        that.uploader.addFile(
          resizeimagecut,
          null,
          null,
          null,
          userData
        );
      
  console.log('img2:')
      reply(resizeimagecut);


};

 
// base64地址图片加载完毕后
// var that=this;
// imgs.onload = function () {


// }




        },








    additem(){
      if(this.fileList.length==0)
      {
         this.$toast('作品未上传')
        return;
      }
      var tags=[];
      for(var i=0;i<this.list.length;i++)
      {
        if(this.list[i].select==1)
        {
tags.push(this.list[i].id)
        }
      }
      this.item.tags=tags;
         var skunames=[];
      for(var i=0;i<this.list2.length;i++)
      {
        if(this.list2[i].select==1)
        {
skunames.push(this.list2[i].id)
        }
      }
      this.item.skunames=skunames;
      if(this.item.tags.length==0)
      {
        this.$toast('标签未选择')
        return;
      }
            if(this.item.tags.length==0)
      {
        this.$toast('标签未选择')
        return;
      }
        if(!this.item.image)
      {
        this.$toast('图片未选择')
        return;
      }
       if(!this.item.title)
      {
        this.$toast('标题未输入')
        return;
      }
        if(!this.item.longDesc)
      {
        this.$toast('作品故事未输入')
        return;
      }















this.$loadingshow();

 additem(this.item).then(res => {
   this.$loadingclose();
                   if(res.code==200)
                  {
                    this.$toast('作品上传完成')
                    // location.reload();
                      this.$router.push({path:'/files/zuopin'})

                  }else
                  {
                     this.$toast('作品上传失败')
                  }
    

        
          },
          err=>{
             
               this.$loadingclose();
          }
          );



    },
     inituploader() {
        
    var _this = this;
      this.uploader = new AliyunUpload.Vod({
        //分片大小默认1M，不能小于100K
        partSize: 1048576,
        //并行上传分片个数，默认5
        parallel: 5,
        //网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        //网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        // 开始上传
        onUploadstarted: function(uploadInfo) {
          // _this.$loadingshowjindu('0%')
          console.log(
            "onUploadStarted:" +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object
          );
          //上传方式1, 需要根据uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress，如果videoId有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
          // this.uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
          //上传方式2、

          //   $.ajax({
          //     url: "/api/getvideotoken",

          //     dataType: "json",
          //     type: "get",
          //     success: function(json) {
          //       //var uploadAddress = json.data.UploadAddress;
          //       //	var uploadAuth = json.data.UploadAuth;
          //       //var videoId = json.data.VideoId;
          //       //得到视频上传的凭证
          //       //vId = videoId;

          //       //如果此部分执行说明后端返回凭证成功，从data中获取返回的uploadAddress、uploadAuth、videoId，然后调用阿里云的api直接进行文件上传
          //       ///this.uploader.setUploadAuthAndAddress(uploadInfo, json.data.UploadAuth, json.data.UploadAddress, json.data.VideoId);
          //       this.uploader.setSTSToken(
          //         uploadInfo,
          //         json.result.key,
          //         json.result.secret,
          //         json.result.token
          //       );
          //     }
          //   });
          gettokens({}).then(res => {
              console.log(res)
              console.log(this.uploader)
            _this.uploader.setSTSToken(
              uploadInfo,
              res.result.key,
              res.result.secret,
              res.result.token
            );
          });
        },
        // 文件上传成功
        onUploadSucceed: function(uploadInfo) {
             _this.piccount+=1;
           if(_this.piccount==3)
           {
             _this.$loadingshowjindu( "100%")
            _this.$loadingshowjindu( "")
                _this.$loadingclose();
           }
           
         

          console.log(
            "onUploadSucceed: " +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object +
              uploadInfo +
              JSON.stringify(uploadInfo)
          );
       
        
          console.log("videoId:" + uploadInfo.videoId);
           if(uploadInfo.videoId==null)
            {
                var tempic="http://tests.sodataint.com/"+uploadInfo.object;
                 if(_this.piccount==1)
                 {
                   _this.fileList=[];
                   _this.fileList.push({url:tempic})
                 }
                   if(uploadInfo.videoInfo.index=='1')
                   {
                 _this.item.image=tempic;
                   }
                   else if(uploadInfo.videoInfo.index=='2')
               {  _this.item.imageicon=tempic;

               }
               else if(uploadInfo.videoInfo.index=='3')
               {
                   _this.item.imageori=tempic;
                   if(_this.tiff)
                   _this.item.service=_this.tiff;

               }
               
          
                
          }
          else
          {
        
        
        
          }
        },
        // 文件上传失败
        onUploadFailed: function(uploadInfo, code, message) {
          _this.$loadingclose();
        _this.$toast('上传失败')
          console.log(
            "onUploadFailed: file:" +
              uploadInfo.file.name +
              ",code:" +
              code +
              ", message:" +
              message
          );
        },
        // 文件上传进度，单位：字节
        onUploadProgress: function(uploadInfo, totalSize, loadedPercent) {
          console.log(
            "onUploadProgress:file:" +
              uploadInfo.file.name +
              ", fileSize:" +
              totalSize +
              ", percent:" +
              Math.ceil(loadedPercent * 100) +
              "%"
          );
          // $("#jindu").html("percent:" + Math.ceil(loadedPercent * 100) + "%");
             _this.$loadingshowjindu(Math.ceil(_this.piccount/3 * 100) + "%")
        },
        // 上传凭证超时
        onUploadTokenExpired: function(uploadInfo) {
          console.log("onUploadTokenExpired");
          //上传方式1  实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
          // uploader.resumeUploadWithAuth(uploadAuth);
          // 上传方式2 实现时，从新获取STS临时账号用于恢复上传
          // uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
        },
        //全部文件上传结束
        onUploadEnd: function(uploadInfo) {
          console.log("onUploadEnd: uploaded all the files");
        }
      });
    },
      onchangeit(item,color,event){
          if(color=="#969799"){
              item.color="#1989fa"; 
              item.select=1;
          }else if(color=="#1989fa"){
              item.color="#969799";
              item.select=0;
          }
          event.target.style.backgroundColor=item.color;
            console.log(event.target.style.backgroundColor)
          

      },
      onConfirm2(){
          
      
      },
onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
      // 返回布尔值
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
      }
    
      return true;
    },

    // 返回 Promise
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          Toast('请上传 jpg 格式图片');
          reject();
        } else {
          resolve();
        }
      });
    },
    dealwithimages720(event,detail){
      console.log('start')
            this.$loadingshowjindu('处理中');

      this.fileori=event.file;
      this.tiff=null;

      this.workname=detail.name;


    console.log("fileori:"+this.workname)
    console.log(this.fileori)
     if(this.fileori.name.indexOf('.tif')==-1)
     {

      
     this.resize(this.fileori,720,720,this.dealwithimages240,1);
     }
     else
     {
       // 直接由服务器存储起来tiff磁盘路径，并返回服务器磁盘路径和jpg的base64.base64转为fileori.继而压缩图片即可。
      
    
        this.UpladFile(this.fileori);
       
     }
    //  console.log('start2')
     
    },
    dealwithimages240(){
      if(this.fileori.name.indexOf('.tif')==-1)
     
     this.resize(this.fileori,240,240,this.uploadvideo,2);
     else
     {    
        this.resizetif(this.fileori,240,240,this.uploadvideo,2);


     }
    },
 uploadvideo() {
  
       
      // console.log('文件名异常')
      console.log(this.fileori)
         var  userData =
         '{"Vod":{"StorageLocation":"","Title":"标题","Description":"this is desc.我是描述","CateId":"19","index":"3", "Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';

 
      // if(this.fileori.name.indexOf('.tif')!=-1)
      //  this.fileori=this.fileoripng;
  //  userData =
  //        '{"Vod":{"StorageLocation":"","Title":"标题","Description":"this is desc.我是描述","CateId":"19","index":"3", "Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';


            
        this.uploader.addFile(
          this.fileori,
          null,
          null,
          null,
          userData
        );
      
       
     
     
    this.piccount=0;
        this.uploader.startUpload();
 

      
    },
      afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.picname=file.file.name;
      this.picurl=file.content;
      console.log("-------------------------------------------------------");
       console.log(file);
    //   console.log(this.picname);
    //   console.log(this.picurl);

    },

getimgsrc(data){
      
      this.havesign=true;
       this.uploadImage5=data;
       
      //  console.log("我的图片的地址："+this.imgsrc);
       this.show2 = false;
  

     },
     tijiao()
     {
        if(this.havesign)
            this.uploadqianming(this.uploadImage5);
            else
            this.$toast('您还未签名')
     },
       uploadqianming(base64str){
      
        this.uploadtag=9;
       this.UpladFile(null,base64str);
    },
     UpladFile(fileObj) {
            // var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
              var form = new FormData(); // FormData 对象
            var isbase64=0;
            // console.log('base64str:'+base64str)
            //  console.log('fileobj:'+fileObj)
        //    if(base64str)
                 // isbase64=1;
            var url =  "/dev-api/mapi/customer/uploadwork" // 接收上传文件的后台地址
            if(fileObj)
            {
          
            form.append("file", fileObj); // 文件对象
            }
            else{
//               var dataurl=base64str;
//      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
// bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
// while(n--){
//     u8arr[n] = bstr.charCodeAt(n);
// }
// var obj = new Blob([u8arr], {type:mime});
 
// form.append("file", obj,"xysign.png");
            }


            this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            this.xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            this.xhr.onload = this.uploadComplete; //请求完成
            this.xhr.onerror =  this.uploadFailed; //请求失败
         var _this=this;
            this.xhr.upload.onprogress = this.progressFunction;//【上传进度调用方法实现】
            this.xhr.upload.onloadstart = function(){//上传开始执行方法
              // var  ot = new Date().getTime();   //设置上传开始时间
              //  var  oloaded = 0;//设置上传开始时，以上传的文件大小为0
              _this.show=true;
              // _this.$loadingshow();
              _this.rate=100;
              _this.currentRate=0;
              _this.text='';
               
               
            };

            this.xhr.send(form); //开始上传，发送form数据

        },
   //上传成功响应
          uploadComplete(evt) {
            //服务断接收完文件返回的结果
               this.show=false;
              // this.$loadingclose();
            var data = JSON.parse(evt.target.responseText);
            // console.log('服务器响应')
            console.log(data)
            if(data.success) {
              console.log('上传成功')
     this.fileori=this.base64ToFile("data:image/jpeg;base64,"+data.result.base64,'resize.png');//此种情况，必须设置原始图为服务器路径。而不是jpg图片路径。
       this.resize(this.fileori,720,720,this.dealwithimages240,1);
       this.tiff=data.result.tiff;
            //    this.$toast("签约成功！");
             //   this.sign=true;
               // sessionStorage.setItem('signpic',data.result)
                // this.uploadImage5=data.result;
                // this.uploadsuccess(data.result);
            }else{
                this.$toast(data.message);
            }

        },
        //上传失败
          uploadFailed(evt) {
                 this.show=false;
                  this.$loadingclose();
            this.$toast("上传失败！");
        },
        //取消上传
          cancleUploadFile(){
                 this.show=false;
                  this.$loadingclose();
            this.xhr.abort();
        },

  //上传进度实现方法，上传过程中会频繁调用该方法
          progressFunction(evt) {
            // var progressBar = document.getElementById("progressBar");
            // var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
            if (evt.lengthComputable) {//
                // progressBar.max = evt.total;
                 // progressBar.value = evt.loaded;
                // this.rate=evt.total;
               
                this.currentRate = Math.round(evt.loaded / evt.total * 100);
               
                this.text = Math.round(evt.loaded / evt.total * 100) + "%";
                console.log(this.currentRate)
                  if(evt.loaded==evt.total)
                {
                   this.$loadingshow();
                }
            }
            else
            {
            
            }
             
        },

  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
        .tjzuopin{
      height: 40px;
    border-radius: 10px;
    background: cornflowerblue;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    /* display: flex; */
    position: fixed;
    bottom: 10px;
    width: 90%;
    }
    .tagdiv{
  
    float: left;
    width: 100%;
    margin: 15px;
    }
    .tijiaozuopin{
      margin:0 atuo;
    height: 40px;
    border-radius: 10px;
    background: cornflowerblue;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    /* display: flex; */
    // position: fixed;
    bottom: 10px;
    width: 200px;
        
    }
    .luru{
      display: flex;
      justify-content:space-around;
      flex-wrap: wrap;
    }
</style>
